@if (renaming) {
    <form (ngSubmit)="rename()">
        <div class="row g-1 align-items-center">
            <div class="col">
                <div class="form-group">
                    <sqx-control-errors [for]="renameForm" />
                    <input
                        class="form-control form-control-{{ size }}"
                        [formControl]="renameForm"
                        (keydown)="onKeyDown($event)"
                        [maxLength]="inputTitleLength"
                        spellcheck="false"
                        sqxFocusOnInit />
                </div>
            </div>

            <div class="col-auto">
                <button
                    class="btn btn-primary btn-{{ size }}"
                    attr.aria-label="{{ 'common.save' | sqxTranslate }}"
                    [disabled]="!renameForm.valid || !renameForm.dirty"
                    type="submit">
                    <i class="icon-checkmark"></i>
                </button>
            </div>

            @if (closeButton) {
                <div class="col-auto">
                    <button
                        class="btn btn-text-secondary btn-{{ size }} btn-cancel"
                        attr.aria-label="{{ 'common.cancel' | sqxTranslate }}"
                        (click)="toggleRename()"
                        type="button">
                        <i class="icon-close"></i>
                    </button>
                </div>
            }
        </div>
    </form>
} @else {
    <div class="row g-0 align-items-center title-view d-nowrap">
        <div class="col">
            <h3 class="truncate {{ size }}" [class.fallback]="!inputTitle" (dblclick)="toggleRename()">
                {{ inputTitle || displayFallback }}
            </h3>
        </div>

        @if (!disabled) {
            <div class="col-auto title-edit">
                <button
                    class="btn btn-text-secondary btn-{{ size }}"
                    attr.aria-label="{{ 'common.rename' | sqxTranslate }}"
                    (click)="toggleRename()"
                    type="button">
                    <i class="icon-pencil text-decent"></i>
                </button>
            </div>
        }

        <div class="col-auto">
            <button class="btn btn-text-secondary btn-{{ size }} btn-placeholder" (click)="toggleRename()" type="button">&nbsp;</button>
        </div>
    </div>
}
